$fs:170.66px;
$icon-color:#c5c5c5;
html {
    font-size: $fs;
}

* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: r(640px);
   
}
.w {
    width: r(581px);
    margin: 0 auto;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

a {
    text-decoration: none;
}

@function r($px) {
    @return $px/$fs*1rem
}

header {
    .head-bar {
        width: r(640px);
        height: r(89px);
        background: #b20000;
        >img {
            width: r(264px);
            height: r(40px);
            display: block;
            margin: 0 auto;
            padding-top: r(25px);
        }
        .icon-fangdajing {
           font-size: r(32px);
            position: absolute;
            color: white;
            right: r(17px);
            top: r(25px);
        }
        .icon-iconmore{
          font-size: r(32px);
            position: absolute;
            color: white;
            left: r(17px);
            top: r(25px);
        }
          .icon-person{
             font-size: r(46px);
            position: absolute;
            color: white;
            right: r(70px);
            top: r(20px);
        }
        
    }
    .logo-bar {
        position: relative;
        width: r(640px);
        height: r(51px);
        >div {
            top: r(14px);
            left: r(27px);
            position: absolute;
            width: r(133px);
            height: r(23px);
            border-right: 1px solid #e7e7e7;
        }
        .small_logo {
            display: block;
            width: r(125px);
            height: r(16px);
        }
        .alimama {
            position: absolute;
            display: block;
            width: r(65px);
            height: r(22px);
            top: r(14px);
            left: r(168px);
        }
    }
}
.head-search {
   
    font-size: 0;
    padding-top: r(20px);
    width: r(612px);
    height: r(89px);
    .chacha {
        background: #b60005;
        width: r(50px);
        height: r(50px);
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: r(50px);
        .icon-chahca {
            font-size: r(36px);
        }
    }
    .search-input {
        width: r(531px);
        height: r(48px);
        border: r(1px) solid white;
        border-radius: r(25px);
        padding-left: r(15px);
        .input {
            line-height: r(42px);
            >input {
                vertical-align: top;
                width: r(438px);
                height: r(44px);
                color: white;
                background: #222222;
                border: 0px #ccc solid;
                outline: none;
                padding-left: r(6px);
            }
            .icon-fangdajing {
                font-size: r(34px);
                color: white;
                line-height: r(48px);
                margin-right: r(6px);
            }
        }
        .search-icon {
            width: r(42px);
            height: r(42px);
            border: r(1px) solid white;
            border-radius: 50%;
            text-align: center;
        }
        .icon-fangdajing {
            font-size: r(34px);
            color: white;
            line-height: r(48px);
            margin-right: r(6px);
        }
    }
}

.tabbar {
    width: r(640px);
    position: fixed;
    bottom: 0;
    background: #f5f5f5;
    font-size: 0;
    div {
        float: left;
        width: r(127.2px);
        height: r(96px);
        position: relative;
        text-align: center;
        margin-top: r(10px);
        >p {
            font-size: r(17.76px);
            color: #8b8b8b;
        }
        >.iconfont {
            color: #8b8b8b;
            font-size: r(50px);
        }
        &:hover>.iconfont {
            color: red;
        }
        &:hover>p {
            color: red;
        }
    }
    .shouye,
    .tabar_logo,
    .wenzhang,
    .ziyuan {
        &::after {
            content: '';
            position: absolute;
            left: auto;
            top: auto;
            bottom: r(21px);
            right: 0;
            height: 55%;
            width: r(1px);
            background-color: #e7e7e7;
        }
    }
}